.rightContent {
  max-width: 1900px;
  margin: 0 auto;
  padding: 0 15px;
  background-color: rgb(240, 242, 244);
  :global {
    .title {
      margin-bottom: 1.5rem !important;
      h4 {
        .anticon {
          margin-right: 10px;
        }
      }
    }
    .cards {
      display: flex;
      flex-wrap: wrap;
      .card {
        padding-left: 0.825rem !important;
        padding-right: 0.825rem !important;

        // background: #fff;
        border-width: 0;
        margin-bottom: 1rem;
        box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.2);
        transition: background-color 0.3s;
        transition: all .3s ease;

        a {
          display: flex;
          margin-bottom: 1.5rem !important;
          background: #fff;
          border-width: 0;
          box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.2);
          transition: background-color 0.3s;
          .card-body {
            position: relative;
            padding: 0.5rem 1rem;
            width: 100%;
            .url-content {
              display: flex;
              align-items: center;
              
              .url-img {
                flex: none;
                width: 60px;
                height: 60px;
                margin-right: 0.5rem !important;
                border-radius: 50%;
                background: rgba(128, 128, 128, 0.1);
                overflow: hidden;
                img {
                }
              }
              .url-info {
                overflow: hidden;
                padding-right: 5px;
                .name {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: block;
                }
                .decrip {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: block;
                  font-size: .75rem;
                  color: #6c757d !important;
                }
              }
            }
            .url-like {
              position: absolute;
              top: 5px;
              right: 10px;
              // opacity: 0;
              transition: opacity .3s;
              .views {
                margin-right: 5px;
              }
            }
            
          }
        }
        a:hover {
          text-decoration: none;
          color: #f1404b;
        }
      }
      .card:hover {
        transform: translateY(-6px);
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
        -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
        transition: all .3s ease;
      }
      @media (min-width: 576px) {
        .card {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 100%;
          flex: 0 0 100%;
          max-width: 100%;
        }
      }
      @media (min-width: 768px) {
        .card {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 50%;
          flex: 0 0 50%;
          max-width: 50%;
        }
      }
      @media (min-width: 992px) {
        .card {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 20%;
          flex: 0 0 20%;
          max-width: 20%;
        }
      }
      @media (min-width: 1400px) {
        .card {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 20%;
          flex: 0 0 20%;
          max-width: 20%;
        }
      }
    }
  }
}
